import {useNavigate, useSearchParams} from "react-router-dom";
import {useDetail} from "@/hooks/useDetail";
import {NavBar} from "antd-mobile";

const Detail = () => {

    // 获取请求地址的参数
    const [searchParams] = useSearchParams();
    const id = searchParams.get("id");

    // 文章详情
    const {detail} = useDetail(id);

    // 返回home页面
    const navigate = useNavigate();
    const back = () => {
        navigate(-1)
    }

    if (!detail) {
        return <div>this is loading</div>
    }
    return (
        <div>
            <NavBar onBack={back}>{detail.title}</NavBar>
            <div dangerouslySetInnerHTML={{__html: detail.content}}></div>
        </div>
    )
}

export default Detail